import React, { type RefObject } from "react";
import { FiPlus, FiSmile, FiMic } from "react-icons/fi";
import PlusMenu from "./PlusMenu";

interface MessageInputProps {
  newMessage: string;
  setNewMessage: (msg: string) => void;
  isPlusMenuOpen: boolean;
  setIsPlusMenuOpen: (open: boolean) => void;
  isEmojiPickerOpen: boolean;
  setIsEmojiPickerOpen: (open: boolean) => void;
  isTextInputFocused: boolean;
  setIsTextInputFocused: (focus: boolean) => void;
  handleSendMessage: () => void;
  handleKeyDown: (e: React.KeyboardEvent) => void;
  handleAdditionalFeatureClick: (feature: string) => void;
  toggleEmojiPicker: () => void;
  handleFocusInput: () => void;
  textareaRef: RefObject<HTMLTextAreaElement | null>;
  emojiButtonRef: RefObject<HTMLButtonElement | null>;
}

const MessageInput: React.FC<MessageInputProps> = ({
  newMessage,
  setNewMessage,
  isPlusMenuOpen,
  setIsPlusMenuOpen,
  isEmojiPickerOpen,
  setIsEmojiPickerOpen,
  isTextInputFocused,
  setIsTextInputFocused,
  handleSendMessage,
  handleKeyDown,
  handleAdditionalFeatureClick,
  toggleEmojiPicker,
  handleFocusInput,
  textareaRef,
  emojiButtonRef,
}) => (
  <div className="border-t border-gray-200 bg-white p-2">
    {/* 表情和附件菜单 */}
    {isPlusMenuOpen && <PlusMenu onSelect={handleAdditionalFeatureClick} />}

    <div className="flex items-center space-x-2">
      <button
        className={`p-2 rounded-full ${
          isPlusMenuOpen ? "bg-green-500 text-white" : "text-gray-500"
        }`}
        onClick={() => {
          setIsPlusMenuOpen(!isPlusMenuOpen);
          setIsEmojiPickerOpen(false);
          setIsTextInputFocused(true);
        }}
      >
        <FiPlus size={24} />
      </button>

      {/* 表情按钮 */}
      <button
        ref={emojiButtonRef}
        className={`p-2 rounded-full ${
          isEmojiPickerOpen ? "bg-green-500 text-white" : "text-gray-500"
        }`}
        onClick={toggleEmojiPicker}
      >
        <FiSmile size={24} />
      </button>

      {/* 输入区域 */}
      {isTextInputFocused ? (
        <textarea
          ref={textareaRef}
          className="flex-1 border border-gray-300 rounded-full py-2 px-4 max-h-20 resize-none"
          placeholder="输入消息..."
          value={newMessage}
          onChange={(e) => setNewMessage(e.target.value)}
          onKeyDown={handleKeyDown}
          onFocus={() => {
            setIsTextInputFocused(true);
            setIsPlusMenuOpen(false);
          }}
          rows={1}
          autoFocus
        />
      ) : (
        <button
          className="flex-1 bg-gray-100 text-gray-500 rounded-full py-2 px-4 text-left"
          onClick={handleFocusInput}
        >
          按住说话
        </button>
      )}

      {/* 发送按钮 */}
      {newMessage ? (
        <button
          className="bg-green-500 text-white rounded-full p-2"
          onClick={handleSendMessage}
        >
          发送
        </button>
      ) : (
        <div className="flex">
          <button
            className="p-2 text-gray-500"
            onClick={() => {
              setIsTextInputFocused(false);
              setIsEmojiPickerOpen(false);
            }}
          >
            <FiMic size={24} />
          </button>
        </div>
      )}
    </div>
  </div>
);

export default MessageInput;
